<template>
  <div class="department-management">
    <div class="header-section">
      <h2>部门管理</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.departmentName"
          placeholder="部门名称"
          class="search-input"
        />
        <el-select
          v-model="searchForm.parentId"
          placeholder="上级部门"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="无" value="0" />
          <el-option v-for="dept in departmentList" :key="dept.id" :label="dept.departmentName" :value="dept.id" />
        </el-select>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table :data="departmentList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" />
        <el-table-column prop="departmentName" label="部门名称" width="180" />
        <el-table-column prop="parentName" label="上级部门" width="180">
          <template #default="scope">
            {{ scope.row.parentName || '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="description" label="部门描述" width="250" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" width="280" fixed="right">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row)" style="margin-right: 8px;">
              编辑
            </el-button>
            <el-button type="success" size="small" @click="handleAddSubDepartment(scope.row)" style="margin-right: 8px;">
              添加子部门
            </el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编辑部门对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="500px"
      :close-on-click-modal="false"
    >
      <el-form :model="formData" label-width="100px">
        <el-form-item label="部门名称" prop="departmentName">
          <el-input v-model="formData.departmentName" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="上级部门" prop="parentId">
          <el-select v-model="formData.parentId" placeholder="请选择上级部门">
            <el-option label="无" value="0" />
            <el-option
              v-for="dept in departmentList"
              :key="dept.id"
              :label="dept.departmentName"
              :value="dept.id"
              :disabled="dept.id === formData.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门描述" prop="description">
          <el-input
            v-model="formData.description"
            placeholder="请输入部门描述"
            type="textarea"
            :rows="3"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="1" :max="100" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSave">保存</el-button>
      </template>
    </el-dialog>

    <!-- 确认删除对话框 -->
    <el-dialog
      v-model="deleteDialogVisible"
      title="确认删除"
      width="300px"
      :close-on-click-modal="false"
    >
      <div class="delete-confirm">确定要删除此部门吗？</div>
      <template #footer>
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmDelete">确定</el-button>
      </template>
    </el-dialog>

    <!-- 批量操作 -->
    <div class="batch-operations">
      <el-button type="primary" @click="handleAddDepartment">添加部门</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';

// 搜索表单
const searchForm = reactive({
  departmentName: '',
  parentId: ''
});

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100
});

// 对话框状态
const dialogVisible = ref(false);
const deleteDialogVisible = ref(false);
const dialogTitle = ref('添加部门');
const formData = reactive({
  id: '',
  departmentName: '',
  parentId: '0',
  description: '',
  sort: 1
});

const currentDeleteId = ref('');

// 模拟部门数据
const departmentList = ref([
  {
    id: 1,
    departmentName: '市场部',
    parentId: '0',
    parentName: '',
    description: '负责公司市场推广和营销活动',
    sort: 1,
    createTime: '2023-01-01 00:00:00'
  },
  {
    id: 2,
    departmentName: '技术部',
    parentId: '0',
    parentName: '',
    description: '负责产品开发和技术支持',
    sort: 2,
    createTime: '2023-01-02 10:00:00'
  },
  {
    id: 3,
    departmentName: '财务部',
    parentId: '0',
    parentName: '',
    description: '负责公司财务管理',
    sort: 3,
    createTime: '2023-01-03 14:30:00'
  },
  {
    id: 4,
    departmentName: '人力资源部',
    parentId: '0',
    parentName: '',
    description: '负责人力资源管理',
    sort: 4,
    createTime: '2023-01-04 09:15:00'
  },
  {
    id: 5,
    departmentName: '客服部',
    parentId: '0',
    parentName: '',
    description: '负责客户服务',
    sort: 5,
    createTime: '2023-01-05 16:45:00'
  },
  {
    id: 6,
    departmentName: '前端组',
    parentId: '2',
    parentName: '技术部',
    description: '负责前端开发',
    sort: 1,
    createTime: '2023-01-06 11:20:00'
  },
  {
    id: 7,
    departmentName: '后端组',
    parentId: '2',
    parentName: '技术部',
    description: '负责后端开发',
    sort: 2,
    createTime: '2023-01-07 15:10:00'
  },
  {
    id: 8,
    departmentName: '测试组',
    parentId: '2',
    parentName: '技术部',
    description: '负责软件测试',
    sort: 3,
    createTime: '2023-01-08 10:30:00'
  },
  {
    id: 9,
    departmentName: '国内市场组',
    parentId: '1',
    parentName: '市场部',
    description: '负责国内市场',
    sort: 1,
    createTime: '2023-01-09 14:00:00'
  },
  {
    id: 10,
    departmentName: '海外市场组',
    parentId: '1',
    parentName: '市场部',
    description: '负责海外市场',
    sort: 2,
    createTime: '2023-01-10 09:45:00'
  }
]);

// 搜索功能
const handleSearch = () => {
  ElMessage.success('搜索功能已触发');
};

// 重置搜索
const resetSearch = () => {
  searchForm.departmentName = '';
  searchForm.parentId = '';
};

// 添加部门
const handleAddDepartment = () => {
  dialogTitle.value = '添加部门';
  formData.id = '';
  formData.departmentName = '';
  formData.parentId = '0';
  formData.description = '';
  formData.sort = 1;
  dialogVisible.value = true;
};

// 添加子部门
const handleAddSubDepartment = (row) => {
  dialogTitle.value = '添加子部门';
  formData.id = '';
  formData.departmentName = '';
  formData.parentId = row.id.toString();
  formData.description = '';
  formData.sort = 1;
  dialogVisible.value = true;
};

// 编辑部门
const handleEdit = (row) => {
  dialogTitle.value = '编辑部门';
  Object.assign(formData, row);
  dialogVisible.value = true;
};

// 删除部门
const handleDelete = (row) => {
  currentDeleteId.value = row.id;
  deleteDialogVisible.value = true;
};

// 确认删除
const confirmDelete = () => {
  const index = departmentList.value.findIndex(item => item.id === currentDeleteId.value);
  if (index > -1) {
    departmentList.value.splice(index, 1);
    ElMessage.success('部门删除成功');
  }
  deleteDialogVisible.value = false;
};

// 保存部门
const handleSave = () => {
  if (dialogTitle.value.includes('添加')) {
    // 添加新部门
    const newDepartment = {
      id: departmentList.value.length + 1,
      departmentName: formData.departmentName,
      parentId: formData.parentId,
      parentName: formData.parentId === '0' ? '' : departmentList.value.find(d => d.id.toString() === formData.parentId)?.departmentName,
      description: formData.description,
      sort: formData.sort,
      createTime: new Date().toLocaleString('zh-CN')
    };
    departmentList.value.unshift(newDepartment);
  } else {
    // 编辑部门
    const index = departmentList.value.findIndex(item => item.id === formData.id);
    if (index > -1) {
      departmentList.value[index] = {
        ...departmentList.value[index],
        departmentName: formData.departmentName,
        parentId: formData.parentId,
        parentName: formData.parentId === '0' ? '' : departmentList.value.find(d => d.id.toString() === formData.parentId)?.departmentName,
        description: formData.description,
        sort: formData.sort
      };
    }
  }
  dialogVisible.value = false;
  ElMessage.success(dialogTitle.value.includes('添加') ? '部门添加成功' : '部门编辑成功');
};

// 分页功能
const handleSizeChange = (size) => {
  pagination.pageSize = size;
};

const handleCurrentChange = (current) => {
  pagination.currentPage = current;
};
</script>

<style scoped>
.department-management {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 16px;
  color: #333;
}

.search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
}

.search-input {
  width: 200px;
}

.search-select {
  width: 150px;
}

.table-section {
    margin-bottom: 20px;
    overflow-x: auto;
  }
  
  .el-table {
    width: 100%;
  }

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.batch-operations {
  margin-bottom: 16px;
}

.delete-confirm {
  text-align: center;
  padding: 20px 0;
  color: #666;
}
</style>